<template>
    <a-layout class="layout">
      <a-layout-sider  v-model:collapsed="collapsed" :trigger="null" collapsible>
        <div class="logo">{{ collapsed ? '方特' : '荆州方特旅游度假区' }}</div>
        <a-menu
      v-model:openKeys="openKeys"
      v-model:selectedKeys="selectedKeys"
      mode="inline"
      theme="dark"
    >
      <!-- <a-menu-item key="1">
        <template #icon>
          <PieChartOutlined />
        </template>
        <span>Option 1</span>
      </a-menu-item>
      <a-menu-item key="2">
        <template #icon>
          <DesktopOutlined />
        </template>
        <span>Option 2</span>
      </a-menu-item>
      <a-menu-item key="3">
        <template #icon>
          <InboxOutlined />
        </template>
        <span>Option 3</span>
      </a-menu-item> -->
      <a-sub-menu key="sub1">
        <template #icon>
          <AppstoreOutlined />
        </template>
        <template #title>Navigation One</template>
        <a-menu-item key="1">Option 1</a-menu-item>
        <a-menu-item key="2">Option 2</a-menu-item>
        <a-menu-item key="3">Option 3</a-menu-item>
        <a-menu-item key="4">Option 4</a-menu-item>
      </a-sub-menu>
      <!-- <a-sub-menu key="sub2">
        <template #icon>
          <AppstoreOutlined />
        </template>
        <template #title>Navigation Two</template>
        <a-menu-item key="9">Option 9</a-menu-item>
        <a-menu-item key="10">Option 10</a-menu-item>
        <a-sub-menu key="sub3" title="Submenu">
          <a-menu-item key="11">Option 11</a-menu-item>
          <a-menu-item key="12">Option 12</a-menu-item>
        </a-sub-menu>
      </a-sub-menu> -->
    </a-menu>
        <!-- <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
         <a-menu-item key="1">
            <user-outlined />
            <span>数据驾驶舱</span>
          </a-menu-item>
          <a-sub-menu key="2" @titleClick="titleClick">
            <template #icon>
              <user-outlined />
            </template>
            <template #title>用户管理</template>
            <a-menu-item key="2-1">用户列表</a-menu-item>
            <a-menu-item key="2-2">用户统计</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="3" @titleClick="titleClick">
            <template #icon>
              <user-outlined />
            </template>
            <template #title>业务管理</template>
            <a-menu-item key="3-1">工单列表</a-menu-item>
            <a-menu-item key="3-2">投诉列表</a-menu-item>
            <a-menu-item key="3-3">客户列表</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="4" @titleClick="titleClick">
            <template #icon>
              <user-outlined />
            </template>
            <template #title>业务管理</template>
            <a-menu-item key="4-1">工单列表</a-menu-item>
            <a-menu-item key="4-2">投诉列表</a-menu-item>
            <a-menu-item key="4-3">客户列表</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="5" @titleClick="titleClick">
            <template #icon>
              <user-outlined />
            </template>
            <template #title>业务管理</template>
            <a-menu-item key="5-1">工单列表</a-menu-item>
            <a-menu-item key="5-2">投诉列表</a-menu-item>
            <a-menu-item key="5-3">客户列表</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="6" @titleClick="titleClick">
            <template #icon>
              <user-outlined />
            </template>
            <template #title>业务管理</template>
            <a-menu-item key="6-1">工单列表</a-menu-item>
            <a-menu-item key="6-2">投诉列表</a-menu-item>
            <a-menu-item key="6-3">客户列表</a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="7" @titleClick="titleClick">
            <template #icon>
              <user-outlined />
            </template>
            <template #title>业务管理</template>
            <a-menu-item key="7-1">工单列表</a-menu-item>
            <a-menu-item key="7-2">投诉列表</a-menu-item>
            <a-menu-item key="7-3">客户列表</a-menu-item>
          </a-sub-menu>
        </a-menu> -->
      </a-layout-sider>
      <a-layout>
        <a-layout-header class="header" >
          <menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
          <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
          <a-menu v-model:selectedKeys="current" mode="horizontal" theme="dark">
    <a-menu-item key="mail">
      <template #icon>
        <mail-outlined />
      </template>
      邮件
    </a-menu-item>
    <a-menu-item key="message">
      <template #icon>
        <bell-outlined />
      </template>
      消息
    </a-menu-item>
    <a-sub-menu key="admin">
      <template #icon>
        <user-outlined />
      </template>
      <template #title>管理员</template>
        <a-menu-item key="setting:1">个人中心</a-menu-item>
        <a-menu-item key="setting:2">修改密码</a-menu-item>
        <a-menu-item key="setting:3">退出系统</a-menu-item>
    </a-sub-menu>
  </a-menu>
          <!-- <a-dropdown style="margin-right:20px">
            <a class="ant-dropdown-link" @click.prevent>
              Simba
              <DownOutlined />
            </a>
            <template #overlay>
              <a-menu>
                <a-menu-item>
                  <a href="javascript:;">
                    <user-outlined />修改密码</a>
                </a-menu-item>
                <a-menu-item>
                  <a href="javascript:;">
                    <user-outlined />注销登录</a>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown> -->
        </a-layout-header>
        <a-layout-content
          :style="{ margin: '10px', padding: '6px', background: '#fff', minHeight: '280px' }">
          空白
        </a-layout-content>
      </a-layout>
    </a-layout>
  </template>
  <script setup>
  //导入图标
  import {
    AppstoreOutlined,
    MailOutlined,
    BellOutlined,
    UserOutlined,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
  } from "@ant-design/icons-vue";
  import {ref} from "vue";
  //左侧菜单栏展开的选项
  let openKeys = ref(['sub1'])
  //左侧菜单栏选中的key
  let selectedKeys = ref(["1"]);
  //顶部菜单选中的key
  const current = ref(['mail'])
  //是否折叠侧边栏
  let collapsed = ref(false)
  
  // import { UserOutlined, VideoCameraOutlined, UploadOutlined, MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons-vue';
  // import { defineComponent, ref } from 'vue';
  // export default defineComponent({
  //   components: {
  //     UserOutlined,
  //     VideoCameraOutlined,
  //     UploadOutlined,
  //     MenuUnfoldOutlined,
  //     MenuFoldOutlined,
  //   },
   
  //   //左侧菜单选中的key
  //   setup() {
  //     return {
  //       selectedKeys: ref(['1']),
  //       collapsed: ref(false),
  //     };
  //   },
  // });
  </script>
  <style lang="scss" scoped>
  .layout {
    width: 100vw;
    height: 100vh;
  }
  .header {
    background: #fff;
    padding: 0;
    display: flex;
    justify-content: space-between;
    background: #001529;
  }
  .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 24px;
    cursor: pointer;
    transition: color 0.3s;
    color: #ffff;
  }
  
  .trigger:hover {
    color: #1890ff;
  }
  
  .logo {
    height: 32px;
    line-height: 32px;
    color: #fff;
    text-align: center;
    letter-spacing: 1px;
    font-size: 17px;
    font-weight: bold;
    font-family: 楷体;
    background: rgba(255, 255, 255, 0.3);
    margin: 16px;
    span {
      overflow: hidden;
    }
  }
  
  .site-layout .site-layout-background {
    background: #fff;
  }
  
  .ant-dropdown-link {
    
    font-size: 20px;
    float: right;
    margin-right: 2%;
  }
  </style>